<template>
  <div class="nav-bar">
    <van-nav-bar
      :title="title"
      :left-text="leftText"
      :left-arrow="leftArrow"
      @click-left="handleBack"
    >
      <template #right>
        <van-popover
          placement="bottom-end"
          theme="dark"
          v-model:show="showPopover"
          :actions="actions"
          @select="onSelect"
        >
          <template #reference>
            <van-icon name="ellipsis" size="24" />
          </template>
        </van-popover>
      </template>
    </van-nav-bar>
    
  </div>
</template>

<script lang="ts" setup>
import { computed,ref} from 'vue'
import { useRoute,useRouter } from 'vue-router';
const router=useRouter()
const route=useRoute()
const title=computed(()=>(route.meta?.title??'天天优选') as string)
const handleBack=()=>{
  router.back()
}
const showPopover=ref(false)
const actions=[
  { text: '首页', icon: 'home-o', path: '/home' },
  { text: '购物车', icon: 'shopping-cart-o', path: '/cart' },
  { text: '我的', icon: 'user-o', path: '/mine' },
]
const onSelect=(action:any)=>{
  //点击跳转功能
  router.push(action.path)
}
const leftText=computed(()=>route.meta?.inTabbar ? '': '返回')
const leftArrow=computed(()=>route.meta?.inTabbar!==true)






</script>

<style  lang="less" scoped>

</style>
